import { defineComponent, ref } from 'vue';
import common from '@/api/common';
import { Image, ActionSheet, showImagePreview } from 'vant';
export default defineComponent({
    name: 'mypicture',
    setup() {
        let imageList = ref([]);
        let resimageList = ref([]);
        const donwherf = ref('http://120.26.56.51:7001/images/09bffaf5-871f-409e-966c-ae67af933359.jpg');
        // Your script setup code here
        let oncloickat = (item, index) => {
            showImagePreview({
                images: item.map((el) => el.image),
                startPosition: index,
                'long-press': (Index) => {
                    console.log(item[Index].image, '長安');
                    donwherf.value = item[Index].image;
                    show.value = true;
                },
            });
        };

        common.getpicture().then((res) => {
            console.log(res);
            imageList.value = res.data;
            // resimageList
            console.log(imageList);
            const groupedData = new Map();

            imageList.value.forEach((item) => {
                // 获取当前对象的 imagedesp 值
                const descript = item.imagedesp;
                // 如果 map 中已经有这个 imagedesp 的条目，则添加到已有数组中
                if (groupedData.has(descript)) {
                    groupedData.get(descript).push(item);
                } else {
                    // 否则创建一个新的数组，并将当前对象加入
                    groupedData.set(descript, [item]);
                }
            });

            // 将结果转换为数组形式
            console.log(groupedData.values(), 'groupedData.values()');
            const result = Array.from(groupedData.values());
            console.log(result, 'result');
            resimageList.value = result;
        });
        // 图片下载
        let show = ref(false);
        let saveImage = (imageUrl, imageName) => {
            const link = document.createElement('a');
            link.href = imageUrl;
            link.download = imageName || 'downloaded-image'; // 默认文件名为 'downloaded-image'
            document.body.appendChild(link); // 将链接添加到文档
            link.click(); // 触发点击事件下载图片
            document.body.removeChild(link); // 移除链接
        };
        const actions = [{ name: '保存图片', icon: 'down' }, { name: '取消' }];
        const onSelect = (item) => {
            show.value = false;
            if (item.name == '保存图片') {
                saveImage(donwherf.value, '下载图片');
                // showToast(item.name);
            }
        };
        return () => (
            <div>
                <Button
                    onClick={() => {
                        console.log(1), (show.value = true), console.log(show.value);
                    }}
                >
                    展示弹窗
                </Button>
                <ActionSheet show={show.value} actions={actions} onSelect={onSelect} />
                {resimageList.value.map((item, index) => {
                    return (
                        <div class="mb-4">
                            <div class="text-xl font-sans font-semibold">
                                <span>{item[0]?.imagedesp}</span>
                            </div>
                            <div class="flex flex-wrap">
                                {' '}
                                {item.map((el, index1) => {
                                    return (
                                        <Image
                                            class="w-28 h-32 mr-0.5 mb-0.5"
                                            src={el.image}
                                            onClick={() => oncloickat(item, index1)}
                                        ></Image>
                                    );
                                })}
                            </div>
                        </div>
                    );
                })}
            </div>
        );
    },
});
